<script setup lang="ts">

import router from "@/router";
import {getInfo} from "@/api/home/login/login";
import {ElMessage} from "element-plus";
import {ArrowRight} from '@element-plus/icons-vue'
import {ref} from "vue";

let user = ref({})

getInfo().then(res => {
    if (res.code == 200) {
        user.value = res.data
        console.log(user.value)
    }
})

function areYouSure() {
    window.localStorage.clear();
    ElMessage.success('退出成功')
    router.push({path: `/login`})
}

</script>

<template>
  <!--设置-->
    <div class="box">
        <div class="titTime" @click="router.go(-1)">
            <van-icon name="arrow-left"/>
            <span class="titleText">设置</span>
        </div>
        <div class="substance">
            <div class="mobilePhoneNumber" @click="router.push({path: '/reviseCellPhone'})">
                <div class="Phone">
                    手机号
                </div>
                <div class="number">
                    {{ user.phoneNumber }}
                    <el-icon>
                        <ArrowRight/>
                    </el-icon>
                </div>
            </div>
            <div class="password" @click="router.push({path: '/revisePassword'})">
                <div class="text">
                    密码设置
                </div>
                <div class="imgBox">
                    <el-icon>
                        <ArrowRight/>
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="uploadBtn">
            <el-button style="width: 50vw" type="primary" @click="areYouSure">退出登录</el-button>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    padding: 8% 6%;

    .titTime {
        margin-bottom: 5%;
        font-size: 5vw;
    }
}

.substance {
    margin-top: 3%;
    padding: 0 5%;
    width: 100%;
    height: 100%;
    min-height: 50vh;

    .mobilePhoneNumber,
    .password {
        padding: 6% 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(42, 43, 65, 0.1);

        .number {
            display: flex;
            align-items: center;
        }
    }
}

.uploadBtn {
    margin: 8% auto;
    padding: 0 20%;
}
</style>